<template>
	<view class="container">
		<TopNav title="拍照打卡"></TopNav>
		<view class="">
			<text class="f-w500 f-s20 line-height28">请上传现场自拍照</text>
		</view>
		<view class="m-t12">
			<UploadImage width="220rpx" height="220rpx" v-model="form.images" :capture="'camera'">
				<view class="upload-image">
					<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
					<text class="m-t8 text-gray f-s12">上传照片</text>
				</view>
			</UploadImage>
		</view>
		<view class="flex justify-center fixed-bottom p-lr16">
			<view class="self-btn flex flex-direction full-width" hover-class="pressed" @click="handleEndService">
				<text class="f-s16 line-height22">完成服务</text>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import UploadImage from '@/components/upload-image/index.vue'
	import {
		setOut,
		endService
	} from '@/api/order/index.js'
	export default {
		components: {
			UploadImage
		},
		data() {
			return {
				form: {
					order_sn: '',
					images: ''
				}
			};
		},
		onLoad(query) {
			this.form.order_sn = query.id
		},
		methods: {
			// 开始服务
			handleEndService() {
				if (!this.form.images) {
					this.$toast("请上传现场自拍照")
					return
				}
				this.$modal.loading('正在上传').then(() => {
					endService(this.form).then(res => {
						this.$modal.closeLoading()
						uni.$emit('endService', true)
						this.$tab.navigateBack()
					}).catch(() => this.$modal.closeLoading())
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		background-color: #fff;
		@include fixed-bottom;
	}

	.container {
		padding: 40rpx 32rpx;
	}
</style>